<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    * JSX的语法规则：
    *   定义虚拟DOM的时候不需要写引号
    *   标签中混入JS表达式的时候要使用{}
    *   样式的类名指定不要用class、需要使用className
    *   内联的样式要用style={{key:value}}的形式书写
    *   必须只有一个根标签
    *   标签必须严格的闭合
    *   标签首字母：如果小写字母开头，则将标签改成html中同名元素、如果大写字母开头，则渲染对应的组件
    * */
    const message="您好"
    const vdom = (
        <div>
            <h1 style={{color: "red"}}>hello</h1>
            <h1 className={"box"}>hello</h1>
            <h1 className={"box"}>{message}</h1>
        </div>
    )
    ReactDOM.render(vdom, document.querySelector("#root"))
</script>
</body>
</html>